<template>
  <div  >
    <div class="tab-item-box" ref="tabItemBox">
      <div v-if="loaded" class="tab-item-head" >
        <span class="tab-item-left">
          <el-input v-model="remark.remark0" style="min-width: 300px" class="remark-search-input"   type="textarea" autosize  ></el-input>
          <el-button icon="el-icon-search" class="head-left-button" size="medium"  @click="headSearchFunc('搜索')">搜索</el-button>
          <el-button type="success" icon="el-icon-check" class="head-left-button"  plain size="medium"   @click="saveRemark()">备注</el-button>
        </span>
        <span class="tab-item-right">
          <el-button style="color: #ffffff" icon="el-icon-plus" size="medium" type="primary" round class="item-head-button" @click="headAddFunc">新建</el-button>
          <el-button style="color: #ffffff;" icon="el-icon-check" size="medium" type="success" round class="item-head-button" @click="headSaveFunc">保存</el-button>
        </span>
      </div>
      <!--   主要内容模块    -->
      <div class="tab-item-body" ref="tabItemBody">
        <div  v-if="loaded" class="main-body-content"  style="">
          <h2>标题</h2>
            {{formData}}
          <el-form :model="formData" :rules="rules" ref="formData"  label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="number" prop="name">
              <el-input v-model.number="formData.number"/>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="formData.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="formData.delivery" active-text="a" active-value="" inactive-text="ina" inactive-value></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="formData.type">
                <el-checkbox label="美食/餐厅线上活动" name="type" value="1"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="formData.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <p>dd</p>
        <p>dd</p>
        <p>dd</p>
        <span class="scroll-top"  @click="scrollToTop">
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    content="点击返回最上，向上滚动展示head—bar">
                  <span slot="reference" >
                    <i class="el-icon-upload2"></i>
                  </span>
              </el-popover>

        </span>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../common/bus';
export default {
  name: "index",
  data(){
    return{
      loaded: false,
      rules: {
        posint:[
          { required: true, message: '请输入整数', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ]
      },
      itemData: {
        basic: {
          name: 'name',
          number: -1,
          region: '',
          delivery: 0,
          type: [],
          resource: [],
        }
      },
      remark: {}
    }
  },
  beforeMount() {
  },
  mounted() {
    const myDiv = this.$refs.tabItemBox;
    myDiv.addEventListener('wheel', this.handleWheel);
  },
  beforeDestroy() {
    const myDiv = this.$refs.tabItemBox;
    myDiv.removeEventListener('wheel', this.handleWheel);
  },
  created() {
    // this.itemData = this.$store.state.itemData
    this.remark = this.itemData.remark
    // this.basic = this.itemData.basic
    this.formData = this.itemData.basic
    this.loaded = true

  },
  methods:{




    /*================头部操作、统一放在这里==============*/
    //搜索按钮
    headSearchFunc(){

    },
    //通用备注保存
    async saveRemark(){
      let param = {
        action : 'update_method',
        data: {
          "remark": this.itemData.remark
        },
        project: this.$route.query.project
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('update success')
      }else {
        this.$message.error(`${res.info}`)
      }
    },
    //头部添加
    headAddFunc(){

    },
    /*头部保存*/
    //请求预检校验 + 请求正式发送
    async headSaveFunc(){
      let validate = true
      this.$refs.formData.validate(res=>{
        console.log(res)
        validate = res
      })
      console.log(this.itemData)
      if(this.itemData.version >= 0 && this.itemData.version){
      }else {
        this.$message.warning('请输入正确版本号')
        return
      }
      if(validate){
        this.$message.success('校验通过')
      }else {
        this.$message.warning('校验不通过')
        return
      }
      console.log(this.itemData)

      this.headSavePost()
    },
      async headSavePost(){
        let param = {
          action : 'update_method',
          data: this.itemData,
          project: this.$route.query.project
        }
        let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
        if(res.status == 200){
          this.$message.success('update success')
          this.tableList = res.data
          this.emitInitPage()
        }else {
          this.$message.error(`${res.info}`)
        }
      },



    /*============= 校验规则================*/
    //大于-1
    validateNumber(rule, value, callback) {
      const number = parseInt(value);
      if (isNaN(number) || number < 0) {
        callback(new Error('请输入大于-1的整数'));
      } else {
        callback();
      }
    },

    /*================通用事件,非特殊情况不用处理==============*/
    //监听滚动事件
    handleWheel(event) {
      //触发父级head bar
      this.emitHandleWheel(event)

      const tabItemBox = this.$refs.tabItemBox;
      if (event.deltaY > 0) {
        if(tabItemBox) tabItemBox.style.height = 'calc(100vh - 180px)';

      } else {
        tabItemBox.style.height = 'calc(100vh - 245px)';
      }
    },
    //通过event bus来控制主要框架的行为
    //切换tab 、重绘页面 、重载页面
    emitChangeTab(){
      bus.$emit('change-tab', {tabIndex: 'tab1'});
    },
    emitReloadPage(){
      bus.$emit('reload-page', {tabIndex: 'tab0'});
    },
    emitInitPage(){
      bus.$emit('init-page', 'msg');
    },
    emitHandleWheel(event){
      bus.$emit('handle-wheel', {event:event});
    },


    //滚动置顶通用操作
    scrollToTop() {
      this.$refs.tabItemBody.scrollIntoView({ behavior: 'smooth', block: 'start' });
      this.handleWheel({deltaY:-1}) //模拟向上滚
    },

  }

}
</script>

<style scoped>
.tab-item-box{
  height: calc(100vh - 245px);
}

.tab-item-head{
  position: sticky;
  top: 0;
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 0;
  /*background-color: rgba(0, 255, 149, 0.1);*/
  box-shadow: 0px 10px 10px white;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}
.tab-item-left{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.remark-search-input{
  margin-right: 10px;
  width: 200px;
}
.el-textarea__inner{
  height: 36px!important;
}
.tab-item-right{

}
.tab-item-body{
  position: relative;
  /*background-color: #409EFF;*/
  /*height: 150vh;*/
}
.main-body-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

/*模块通用操作*/
.scroll-top{
  padding: 6px 8px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 5px;
  background-color: #f2f5f6;
  box-shadow: 0 0 3px 2px rgba(25,137,250, .1);
  text-align: center;
  color: #1989fa;
  position: sticky;
  left: 100%;
  bottom: 4px;
  border: 1px solid #cae4fd;
  opacity: 0.9;
}
.scroll-top:hover{
  cursor: pointer;
}
</style>